const tbody = document.querySelector('tbody');
// 查询并生成数据
getScoreList()
// 双击事件，input标签显示，值等于数据库的值，并且获取焦点
tbody.addEventListener("dblclick", function (e) {
    const dom = e.target
    if (dom.nodeName === 'TD' && dom.classList.contains('score')) {
        const input = dom.querySelector('input')
        input.style.display = "block"
        input.value = dom.innerText
        input.focus()
    }
})

// 封装查询成绩数据函数
function getScoreList() {
    axios.get('/score/list')
        .then(result => {
            // console.log(result);
            const obj = result.data.data
            let html = ''
            for (const key in obj) {
                // 根据成绩数组生成对应数量的标签
                const temphtml = obj[key].score.reduce((h, v, i) =>
                    h + `<td class="score">${v}<input type="text" data-id=${key} data-batch=${i + 1}></td>`
                    , '')
                // 生成整个标签页面
                html += `
                <tr>
                <th scope="row">${key}</th>
                <td>${obj[key].name}</td>
                ${temphtml}
                </tr>`
            }
            tbody.innerHTML = html
            // 获取input标签数组，给input标签添加失去焦点事件
            const inputs = document.querySelectorAll('input');
            inputs.forEach(input =>
                input.addEventListener('blur', function () {
                    const data = {
                        stu_id: input.dataset.id,
                        batch: input.dataset.batch,
                        score: input.value,
                    }
                    // 发送修改请求
                    axios.post('/score/entry', data)
                        .then(result => {
                            if (result.data.code === 0) {
                                toastr.success(result.data.message)
                                getScoreList()
                            }
                        })
                })
            )
        })


}
